<!--
 * @FilePath: index.html
 * @Author: 苏苏少年
 * @Date: 2022-10-18 16:12:50
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <title>501寝室</title>
</head>
<body>
    <div class="container">
        <br/>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addleModal">新增</button>
        <br/><br/>
        <table class="table table-hover table-bordered">
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>苏苏少年</td>
                <td>susu</td>
                <td>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#updateModal">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>余馨</td>
                <td>112233</td>
                <td>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#updateModal">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>涵畅</td>
                <td>a689</td>
                <td>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#updateModal">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>俊誉</td>
                <td>34366</td>
                <td>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#updateModal">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>朝辉</td>
                <td>453266</td>
                <td>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#updateModal">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>颖逸</td>
                <td>6w8866</td>
                <td>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#updateModal">编辑</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
                </td>
            </tr>


        </table>
    </div>

    <!-- 新增 模态框 -->
    <div class="modal fade" id="addleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4>新增用户信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">用户名:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">密码:</label>
                            <input class="form-control" id="message-text"></input>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑 模态框 -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4>编辑用户信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">用户名:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">密码:</label>
                            <input class="form-control" id="message-text"></input>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">修改</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 删除 模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4>删除用户信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">确认删除吗?</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">删除</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

<!-- jQuery文件 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('New message to ' + recipient)
        modal.find('.modal-body input').val(recipient)
    })
</script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>